<!doctype html>
<html>
  
  <head>
    <meta charset="utf-8">
    <meta name="renderer" content="webkit|ie-comp|ie-stand">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1.0,maximum-scale=1.0,user-scalable=no" />
    <meta http-equiv="Cache-Control" content="no-siteapp" />
    <title>网络安全攻防大赛首页</title>
    <link rel="stylesheet" type="text/css" href="/static/css/reset_css.css" /></head>
    <link rel="stylesheet" type="text/css" href="/static/css/style2.css" /></head>
  
  <body style="height:100%;margin:auto;">
    <div class="outer">
      <!--头部区域 start-->
      <div class="topdiv">
        <div class="logo vlevel">2019年“天创杯”网络安全AWD攻防竞赛</div>
        <div class="countdown">
          <span style="color:#fff; font-size:1.2em;margin-right:5px;">倒计时</span>
          <span id='timecount'>1:20:22</span></div>
      </div>
      <!--头部区域 end-->
      <!--主体区域 start-->
      <div class="maindiv">
        <div class="main_l lborderimg">
          <div class="title">积分榜</div>
          <div class="txt">
            <table width="100%" height="100%" class="jftable">
              <thead class="table-head ">
                <tr>
                  <th>排&nbsp;&nbsp;名</th>
                  <th>团&nbsp;&nbsp;队</th>
                  <th>得&nbsp;&nbsp;分</th></tr>
              </thead>
              <tbody class="scroll" id="score"></tbody>
            </table>
          </div>
        </div>
        <div class="main_r">
          <div class="main_r_top rborderimg">
            <div class="title">实时战况</div>
            <div class="txt">
              <div class="status scroll clearfix">
                <ul class="clearfix" id='showrounds'>                  
                </ul>
              </div>
            </div>
          </div>
          <div class="main_r_bottom rborderimg">
            <!--echart图表区域 start-->
            <div class="chart" id="echarts_main"></div>
            <!--echart图表区域 end--></div>
        </div>
      </div>
      <!--主体区域 end-->
  </div>
  </body>

</html>



<script src="/static/js/jquery.min.js" type="text/javascript" ></script>
<script src="/static/js/echarts.min.js"></script>
<script src="/static/js/app_show.js" type="text/javascript" ></script>


<script type="text/javascript">

    var myChart = echarts.init(document.getElementById('echarts_main'));
    //myChart.showLoading();
    //myChart.hideLoading();
    //myChart.setOption(option);  
    function freshscore(){    
        $.getJSON('/scores',
        function (result) {
            var data=[];
            //console.log(result[0]);
            
            for(x in result){
                var xdata=[];
                for(i=0;i<result[x].length;i++)
                    xdata.push('Round:'+i);

                //console.log(x);
                //console.log(result[x]);
                data.push({
                    name: x,
                    type: 'line',
                    data: result[x],
                    smooth: true,
                    symbol:'none',
                    lineStyle: {
                        width: 1,

                    },

                });

            }

            option={
                legend:{
                   textStyle:{color:'#ffffff'}, tooltip: {trigger: 'axis',axisPointer:{type:'line'}}
                },
                //grid:{show:false},
               
                tooltip : {
                    trigger: 'axis',
                    axisPointer: {
                        type: 'cross',
                        //animation: false,
                        label: {
                            backgroundColor: '#505765'
                        }
                    },
                    textStyle:{align:'left'}
                },

                xAxis: {
                    type: 'category',
                    boundaryGap: false,
                    //show:false,
                    axisLine:{lineStyle:{color:'rgba(19, 223, 255, 0.2)'}},
                    data:xdata

                },
                //axisSeperateSetting: false,
                yAxis: {
                    type: 'value',
                    //show:false,
                    splitLine: {
                                    lineStyle: {
                                        // 使用深浅的间隔色
                                        color: ['rgba(19, 223, 255, 0.2)']
                                    }
                                },
                    axisLine:{lineStyle:{color:'rgba(19, 223, 255, 0.2)'}},
                    min:function(value) {
                          return value.min - 1000;
                      } ,
                },
                series:data
            };
            myChart.setOption(option);
                       
        }
        );
    }
  freshscore();
  setInterval('freshscore()', 10*1000); // 队伍情况每一秒刷新一次

</script>




















